<!--
* @author 吉梦林
* @time 2021-4-2
* @dec 点击按钮之后的气泡弹出框 + 气泡中的选项卡
-->
<script>
    /* eslint-disable no-unused-vars */
    import "./addBox.less";

    export default {
        name: "AddBox",
        props: {
            nodeConfig: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {
                allBoxArr: [
                    {
                        type: "A",
                        value: "锻打",
                        isRow: true,
                        calssName: "approver",
                        title: "钢丝绳类",
                        icon: "user"
                    },
                    {
                        type: "B",
                        value: "绳涂油-B",
                        isRow: true,
                        calssName: "notifier",
                        icon: "highlight"
                    },
                    {
                        type: "C",
                        value: "绳涂油-C",
                        isRow: true,
                        calssName: "notifier",
                        icon: "highlight"
                    },
                    {
                        type: "D",
                        value: "绳涂油-D",
                        isRow: true,
                        calssName: "notifier",
                        icon: "highlight"
                    },
                    {
                        type: "E",
                        value: "绳涂油E",
                        isRow: true,
                        calssName: "notifier",
                        icon: "highlight"
                    },
                    {
                        type: "F",
                        value: "绳涂油-F",
                        isRow: true,
                        calssName: "notifier",
                        icon: "highlight"
                    },
                    {
                        type: "G",
                        value: "绳涂油-G",
                        isRow: true,
                        calssName: "notifier",
                        icon: "highlight"
                    },
                    {
                        type: "H",
                        value: "绳涂油-H",
                        isRow: true,
                        calssName: "notifier",
                        icon: "highlight"
                    },
                    {
                        type: "B",
                        value: "合绳",
                        isRow: false,
                        calssName: "route",
                        icon: "sliders"
                    },
                    {
                        type: "B",
                        value: "股涂油",
                        isRow: false,
                        calssName: "route",
                        icon: "sliders"
                    }
                ],
            };
        },

        methods: {
            // 通知父组件，点击了选项卡，并将选项卡的信息传递给父组件
            clickSelectBox(selecItem) {
                this.$emit("clickSelectBox", selecItem);
            },

            renderAddSBox() {
                return (
                    // 添加弹出框
                    <div class="add-node-popover">
                    <div class="add-node-popover-body">
                    {this.allBoxArr.map(item => {
                            return (
                                <a
                            onClick={() => {
                                this.clickSelectBox(item);
                            }}
                        class={["add-node-popover-item", item.calssName]}
                        >
                        <div class="item-wrapper">
                                <a-icon class="iconfont" type={item.icon} />
                            </div>
                            <span>{item.value}</span>
                            </a>
                        );
                        })}
                    </div>
                    </div>
                );
            }
        },

        render() {
            return this.renderAddSBox();
        }
    };
</script>
